<style>
.head {
  width: 100%;
  height: 150px;
  background-color: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.head_detail {
  width: 25%;
  height: 90%;
  background-color: #ffffff;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.head_left {
  margin: 0px 30px;
}

.head_left img {
  width: 70px;
  height: 70px;
}

.head_right {
  width: 90%;
  /* background-color: antiquewhite; */
  display: flex;
  flex-direction: column;
  /* text-align: center; */
  align-items: center;
}

.info {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 10px;
  margin-top: 10px;
}
</style>
<template>
  <div>
    <!-- 头部统计 -->
    <div class="head">
      <div class="head_detail">
        <div class="head_left">
          <img src="../assets/001.png" alt="">
        </div>
        <div class="head_right">
          <h2>{{ headData.housenum }}</h2>
          <h3>总房产数</h3>
        </div>
      </div>
      <div class="head_detail">
        <div class="head_left">
          <img src="../assets/002.png" alt="">
        </div>
        <div class="head_right">
          <h2>{{ headData.ownernumber }}</h2>
          <h3>总住户数</h3>
        </div>
      </div>
      <div class="head_detail">
        <div class="head_left">
          <img src="../assets/003.png" alt="">
        </div>
        <div class="head_right">
          <h2>{{ headData.carnumer }}</h2>
          <h3>总车位数</h3>
        </div>
      </div>
    </div>
    <!-- 信息统计 -->
    <div class="info">
      <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
      <div id="myEcharts" :style="{ width: '90%', height: '350px' }"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import * as echarts from "echarts";
import axios from "axios";

//存储报表头部区域数据
var headData = ref({
  housenum: 0,
  ownernumber: 0,
  carnumer: 0
})


//月份
var mouthArr = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];

//挂载完后执行
onMounted(() => {
  //获取报表相关数据
  axios.get("https://localhost:7090/api/Activeinfo/getActiveInfoBindEcharts").then(function (response) {
    initChart(response.data);
  })
  //获取报表头部区域数据
  axios.get("https://localhost:7090/api/JurisdictionManage/getNumber").then(function (res) {
    console.log(res.data);
    headData.value = res.data;
  })
})

// 基础配置一下Echarts
function initChart(num) {
  let chart = echarts.init(document.getElementById("myEcharts"));
  // 把配置和数据放这里
  chart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: mouthArr,
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '活动数',
        type: 'bar',
        barWidth: '60%',
        data: num
      }
    ]
  });
  window.onresize = function () {
    //自适应大小
    chart.resize();
  };
}


</script>